<template>
  <div id="lease">
    <el-container>
      <!-- 内容 -->
      <el-header>
        <el-row :gutter="24">
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form ref="form" :model="sumbit" label-width="100px">
                <el-form-item label="姓名：">
                  <el-input v-model="sumbit.lease_zh" placeholder="请输入户主姓名"></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple-light">
              <el-form ref="form" :model="sumbit" label-width="100px">
                <el-form-item label="楼栋单元：" class="drom">
                  <el-select v-model="sumbit.lease_dy" placeholder="请选择楼栋单元">
                    <el-option :label="v" :value="v" v-for="v in dyDate " :key="v">{{v}}</el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content bg-purple">
              <el-form ref="form" :model="sumbit" label-width="100px">
                <el-form-item label="物业类型：" class="drom">
                  <el-select v-model="sumbit.lease_lx" placeholder="请选择物业类型">
                    <el-option :label="v" :value="v" v-for="v in lxDate" :key="v">{{v}}</el-option>
                    <!-- <el-option label="区域二" value="beijing"></el-option> -->
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
          </el-col>
          <el-col :span="5" :offset="1">
            <div class="grid-content bg-purple">
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button type="info" @click="onReset">重置</el-button>
              <!-- 新建按钮 -->
              <el-button type="success" @click="onAdd">新建</el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>

      <!-- 弹出框 -->
      <el-dialog title="新建" :visible.sync="dialogFail" width="60%" :before-close="handleClose">
        <div id="drom_up">
          <div>
            <p>房产信息</p>
            <el-main>
              <el-row :gutter="22">
                <el-col :span="10" :offset="1">
                  <div class="grid-content bg-purple">
                    <el-form ref="form" :model="lease" label-width="100px">
                      <el-form-item label="房号：">
                        <el-input v-model="lease.fh"></el-input>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>
                <el-col :span="10" :offset="1">
                  <div class="grid-content bg-purple">
                    <el-form ref="form" :model="lease" label-width="100px">
                      <div id="area">
                        <span> 面积：</span>
                        <el-input-number v-model="num" controls-position="right" @change="handleChange" :min="0" :max="400">
                        </el-input-number>平方米
                      </div>
                    </el-form>
                  </div>
                </el-col>
              </el-row>

            </el-main>
          </div>
          <div>
            <p>租户信息</p>
            <el-main>
              <el-row :gutter="22">
                <el-col :span="10" :offset="1">
                  <div class="grid-content bg-purple">
                    <el-form ref="form" :model="lease" label-width="100px">
                      <el-form ref="form" :model="lease" label-width="100px">
                        <el-form-item label="租赁期间：">
                          <div class="block">
                            <el-date-picker v-model="lease.zlsj" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
                            </el-date-picker>
                          </div>
                        </el-form-item>
                      </el-form>
                      <el-form-item label="姓名：">
                        <el-input v-model="lease.zh"></el-input>
                      </el-form-item>
                      <div id="area">
                        <span> 租金：</span>
                        <el-input-number v-model="num1" controls-position="right" @change="handleChange" :min="0" :max="400">
                        </el-input-number>平方米
                      </div>
                    </el-form>
                  </div>
                </el-col>
                <el-col :span="10" :offset="1">
                  <div class="grid-content bg-purple">
                    <el-form ref="form" :model="lease" label-width="100px">
                      <el-form-item label="物业类型：" required>
                        <el-select v-model="lease.lx" placeholder="请选择" class="drom">
                          <el-option v-for="v in lxDate" :label="v" :value="v" :key="v">{{v}}</el-option>
                          <!-- <el-option label="区域二" value="beijing"></el-option> -->
                        </el-select>
                      </el-form-item>
                      <el-form-item label="单元楼栋:" required>
                        <el-select v-model="lease.dy" placeholder="请选择" class="drom">
                          <el-option :label="v" :value="v" v-for="(v,i) in dyDate" :key="i">{{v}}</el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="状态：" required>
                        <el-select v-model="lease.zt" placeholder="请选择" class="drom">
                          <el-option v-for="(v,i) in ztDate" :label="v" :value="v" :key="i">{{v}}</el-option>
                        </el-select>
                      </el-form-item>
                      <div id="area">
                        <span> 押金：</span>
                        <el-input-number v-model="num2" controls-position="right" @change="handleChange" :min="0" :max="400">
                        </el-input-number>元/月(元/平方米)
                      </div>
                      <!-- </el-form-item> -->
                    </el-form>
                  </div>
                </el-col>
              </el-row>
            </el-main>
          </div>
          <div>
            <p>其他信息</p>
            <el-main>
              <el-row :gutter="22">
                <el-col :span="10" :offset="1">
                  <div class="grid-content bg-purple">
                    <el-form ref="form" :model="lease" label-width="100px">
                      <el-form-item label="备注：">
                        <el-input type="textarea" v-model="lease.desc" resize="none" id="textarea"></el-input>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>
              </el-row>
            </el-main>
          </div>
          <div>
            <el-row :gutter="22">
              <el-col :span="6" :offset="10">
                <div class="grid-content bg-purple">
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogFail = false">取 消</el-button>
                    <el-button type="primary" @click="dialogSucc">确 定</el-button>
                  </span>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-dialog>

      <el-main>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="lease_id" label="序号" width="150">
          </el-table-column>
          <el-table-column prop="lease_fh" label="房号" width="180">
          </el-table-column>
          <el-table-column prop="lease_dy" label="楼栋单元" width="240">
          </el-table-column>
          <el-table-column prop="lease_lx" label="物业类型" width="180">
          </el-table-column>
          <el-table-column prop="lease_zh" label="租户" width="150">
          </el-table-column>
          <el-table-column prop="lease_zlsj" label="租赁期间" width="320">
          </el-table-column>
          <el-table-column prop="lease_zt" label="状态">
          </el-table-column>
        </el-table>
      </el-main>

      <!-- 页码 -->
      <el-footer>
        <page class="page"></page>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import page from '../../components/page.vue';
import Event from '../../utils/Event.js';
export default {
  components: { page },
  data() {
    return {
      input: '',
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 传给接收分页的数组
      tableData: [],
      // tolDate: [],
      toltable: [],
      dialogFail: false,
      //新建
      lease: {
        fh: '',
        dy: '',
        lx: '',
        zh: '',
        zlsj: '',
        zt: '',
        desc: '',
      },
      // 查询
      sumbit: {
        lease_zu: '',
        lease_dy: '',
        lease_lx: ''
      },
      //新建下拉框数据
      dyDate: [],
      lxDate: [],
      ztDate: [],
      num: '0',//面积
      num1: '0',//租金
      num2: '0', //押金
      // 时间选择器
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      inputarr1: '',
    };
  },
  methods: {
    //查询
    onSubmit() {
      for (let j in this.sumbit) {
        if (this.sumbit[j].trim()) {
          let arr = this.toltable.filter((i) => {
            return i[j].indexOf(this.sumbit[j]) != -1
          })
          Event.$emit('noticeData', arr)
        }
      }
    },
    //点击新建弹框出现
    onAdd() {
      this.dialogFail = true;
    },
    //重置
    onReset() {
      this.sumbit = {}
      this.getuer()
    },
    //点击确定新建成功
    dialogSucc() {
      this.lease.zlsj = this.lease.zlsj[0] + '-' + this.lease.zlsj[1]
      // console.log(this.lease.zlsj);
      this.$axios({
        url: '/lease/add',
        method: 'post',
        data: {
          fh: this.lease.fh,
          dy: this.lease.dy,
          lx: this.lease.lx,
          zh: this.lease.zh,
          zlsj: this.lease.zlsj,
          zt: this.lease.zt,
          desc: this.lease.desc,
        }
      }).then((res) => {
        if (res.data.code == 200) {
          this.$message({ message: '添加成功', type: 'success' })
          this.dialogFail = false;
          this.getuer();
          this.lease = {
            fh: '',
            dy: '',
            lx: '',
            zh: '',
            zlsj: '',
            zt: '',
            desc: '',
          }
        }
      })
    },
    handleClose(doen) {
      this.$confirm('确认关闭？', {
        callback: (action, instance) => {
          //当点击关闭时
          if (action == 'confirm') {
            this.dialogFail = false;
            // 当点击取消时
          } else if (action == 'cancel') {
            this.dialogFail = true;
          }
        },
      });
    },
    handleChange(value) {
    },
    getuer() {
      this.$axios({
        url: '/lease/sel',
        method: 'get'
      }).then((res) => {
        Event.$emit('table', res.data.data)
        this.toltable = res.data.data
        for (let i = 0; i < this.toltable.length; i++) {
          // 楼栋
          this.dyDate.push(this.toltable[i].lease_dy)
          this.dyDate = [...new Set(this.dyDate)]
          // 状态
          this.ztDate.push(this.toltable[i].lease_zt)
          this.ztDate = [...new Set(this.ztDate)]
          // 类型
          this.lxDate.push(this.toltable[i].lease_lx)
          this.lxDate = [...new Set(this.lxDate)]
        }
      })
    },
    receive() {
      Event.$on('tableData', v => {
        this.tableData = v.tableData
      })
    }
  },
  //挂在后
  created() {
    this.inputarr = this.tableData
    this.getuer();
  },
  //挂载后
  mounted() {
    this.receive()
  },
  // 数据更新前
  beforeUpdate() {
    this.receive()
  },
};
</script>

<style scoped lang="less">
#lease {
  padding: 50px;
  height: 100%;

  #p {
    height: 30px;
  }

  .el-select {
    width: 200px;
  }

  .el-input {
    width: 200px;
  }

  .primary {
    text-align: center;
  }
}

#area {
  margin-left: 38px;

  span {
    margin-right: 20px;
  }
}

#drom_up {
  p {
    margin-left: 40px;
    font-weight: bolder;
  }
}

#drom_up .el-select {
  width: 350px;
}

#drom_up .el-input {
  width: 350px;
}

.el-icon-plus {
  margin-bottom: 30px;
  margin-left: 30px;
}
.page {
  text-align: center;
  margin-top: 30px;
}
.block {
  height: 40px;
  margin: 0;
  text-align: left;
}
.el-textarea {
  width: 350px;
}
</style>